<script setup lang="ts">
const route = useRoute()
const appConfig = useAppConfig()

// 控制下拉菜单的显示状态
const showProductMenu = ref(false)
let hideTimer: ReturnType<typeof setTimeout> | null = null

// 控制移动端菜单的显示状态
const showMobileMenu = ref(false)

// 控制移动端产品菜单的展开状态
const showMobileProductMenu = ref(false)

// 控制滚动后的背景色
const isScrolled = ref(false)

// 监听滚动事件
const handleScroll = () => {
  isScrolled.value = window.scrollY > 0
}

// 组件挂载时添加滚动监听并检查初始状态
onMounted(() => {
  // 初始化时检查滚动位置
  handleScroll()
  window.addEventListener('scroll', handleScroll)
})

// 组件卸载时移除滚动监听
onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})

// 鼠标进入时显示菜单
const handleMouseEnter = () => {
  if (hideTimer) {
    clearTimeout(hideTimer)
    hideTimer = null
  }
  showProductMenu.value = true
}

// 鼠标离开时延迟隐藏菜单
const handleMouseLeave = () => {
  hideTimer = setTimeout(() => {
    showProductMenu.value = false
  }, 200)
}

// 点击切换桌面端产品菜单（兼容触摸设备）
const toggleProductMenu = () => {
  showProductMenu.value = !showProductMenu.value
}

// 切换移动端菜单
const toggleMobileMenu = () => {
  showMobileMenu.value = !showMobileMenu.value
}

// 切换移动端产品菜单
const toggleMobileProductMenu = () => {
  showMobileProductMenu.value = !showMobileProductMenu.value
}

// 关闭移动端菜单
const closeMobileMenu = () => {
  showMobileMenu.value = false
  showMobileProductMenu.value = false
}

// 关闭桌面端产品菜单
const closeProductMenu = () => {
  showProductMenu.value = false
}

// 产品介绍的子菜单 - 6列布局
const productMenuItems = [
  {
    label: '云通讯产品',
    icon: 'i-lucide-message-square',
    icon_url: '/home/product/cloud_select.png',
    children: [
      { label: '通知短信', to: '/products/notify-sms' },
      { label: '验证码短信', to: '/products/verify-sms' },
      { label: '会员营销短信', to: '/products/marketing-sms' },
      { label: '图片/视频短信', to: '/products/media-sms' },
      { label: '5G短信', to: '/products/5g-sms' },
      { label: '语音短信', to: '/products/voice-sms' },
      { label: '国际短信', to: '/products/intl-sms' }
    ]
  },
  {
    label: '物联网',
    icon: 'i-lucide-globe',
    icon_url: '/home/product/iot_select.png',
    children: [
      { label: '物联网卡', to: '/products/iot-card' }
    ]
  },
  {
    label: '号码检测',
    icon: 'i-lucide-search',
    icon_url: '/home/product/detection_select.png',
    children: [
      { label: '空号检测', to: '/products/empty-number' },
      { label: '防骚扰黑名单', to: '/products/blacklist' }
    ]
  },
  {
    label: '实名认证',
    icon: 'i-lucide-shield-check',
    icon_url: '/home/product/auth_select.png',
    children: [
      { label: '身份证实名认证', to: '/products/id-verify' },
      { label: '身份证人相对比-有源核验', to: '/products/face-compare' },
      { label: '运营商三要素', to: '/products/mobile-verify' },
      { label: '银行卡四要素', to: '/products/bank-verify' },
      { label: '闪验一键登录SDK', to: '/products/quick-login' },
      { label: '行为验证码', to: '/products/captcha' }
    ]
  },
  {
    label: '业务风控',
    icon: 'i-lucide-layers',
    icon_url: '/home/product/risk_select.png',
    children: [
      { label: '活体检测API', to: '/products/liveness' },
      { label: 'OCR文字识别', to: '/products/ocr' }
    ]
  },
  {
    label: 'IDC',
    icon: 'i-lucide-server',
    icon_url: '/home/product/idc_select.png',
    children: [
      { label: 'IDC服务', to: '/products/idc' },
      { label: 'DCI服务', to: '/products/dci' }
    ]
  }
]

// 主导航菜单
const navigationItems = computed(() => [
  {
    label: '首页',
    to: '/',
    active: route.path === '/'
  },
  {
    label: '产品介绍',
    children: productMenuItems,
    active: route.path.startsWith('/products')
  },
  {
    label: '行业解决案例',
    to: '/solutions',
    active: route.path.startsWith('/solutions')
  },
  // {
  //   label: '开发者工具',
  //   to: '/developers',
  //   active: route.path.startsWith('/developers')
  // },
  {
    label: '关于我们',
    to: '/about',
    active: route.path.startsWith('/about')
  }
])
</script>

<template>
  <header 
    class="fixed top-0 left-0 right-0 z-50 transition-all duration-300"
    :class="[
      isScrolled 
        ? 'bg-white border-b border-gray-200 shadow-sm' 
        : 'bg-transparent border-b border-transparent'
    ]"
  >
    <div class="mx-auto px-4">
      <div class="flex items-center h-11 md:h-16 justify-between">
        <!-- Logo -->
        <NuxtLink 
          to="/" 
          class="flex items-center gap-2 font-bold text-xl text-primary hover:opacity-80 transition-opacity"
        >
        <img class="w-27 h-10 md:w-37 md:h-13" src="/logo.png" alt="">
        </NuxtLink>

        <!-- 桌面端导航 -->
        <nav class="hidden md:flex items-center gap-1 flex-1 ml-20">
          <template v-for="item in navigationItems" :key="item.label">
            <!-- 有子菜单的项 - 使用 hover 触发 -->
            <div 
              v-if="item.children" 
              class="relative"
              @mouseenter="handleMouseEnter"
              @mouseleave="handleMouseLeave"
            >
              <button
                class="px-4 hover:text-[#315EFB] transition-colors flex items-center gap-1 text-base cursor-pointer"
                :class="item.active ? 'font-semibold' : 'text-gray-700 font-medium'"
                :style="item.active ? { color: '#315EFB' } : {}"
                @click="toggleProductMenu"
              >
                {{ item.label }}
                <Icon name="lucide:chevron-down" class="w-4 h-4" />
              </button>

              <!-- 下拉菜单面板 - 全宽显示 -->
              <Transition
                enter-active-class="transition ease-out duration-200"
                enter-from-class="opacity-0 translate-y-1"
                enter-to-class="opacity-100 translate-y-0"
                leave-active-class="transition ease-in duration-150"
                leave-from-class="opacity-100 translate-y-0"
                leave-to-class="opacity-0 translate-y-1"
              >
                <div 
                  v-show="showProductMenu"
                  class="fixed left-0 right-0 top-11 md:top-16 z-50"
                >
                  <div class="bg-white shadow-xl border-t border-gray-200">
                    <div class="mx-auto px-4 py-8">
                      <div class="grid grid-cols-6 gap-8">
                        <div 
                          v-for="category in item.children" 
                          :key="category.label"
                          class="space-y-4"
                        >
                          <!-- 分类图标和标题 -->
                          <div class="text-center space-y-3 pb-4 border-b border-gray-200">
                            <div class="w-14 h-14 mx-auto bg-blue-50 rounded-xl flex items-center justify-center">
                              <!-- <Icon :name="category.icon" class="w-7 h-7 text-primary" /> -->
                              <img :src="category.icon_url" alt="分类图标" class="w-7 h-7 object-contain" />
                            </div>
                            <div class="font-semibold text-base text-gray-900">
                              {{ category.label }}
                            </div>
                          </div>
                          
                          <!-- 子项目列表 -->
                          <div class="space-y-1.5">
                            <NuxtLink
                              v-for="child in category.children"
                              :key="child.to"
                              :to="child.to"
                              class="block px-3 py-2.5 text-sm text-gray-600 hover:text-primary hover:bg-gray-50 rounded-lg transition-colors text-center"
                              @click="closeProductMenu"
                            >
                              {{ child.label }}
                            </NuxtLink>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </Transition>
            </div>

            <!-- 普通链接项 -->
            <NuxtLink
              v-else
              :to="item.to"
              class="px-4 hover:text-[#315EFB] transition-colors text-base cursor-pointer"
              :class="item.active ? 'font-semibold' : 'text-gray-700 font-medium'"
              :style="item.active ? { color: '#315EFB' } : {}"
            >
              {{ item.label }}
            </NuxtLink>
          </template>
        </nav>

        <!-- 右侧按钮 -->
        <div class="flex items-center gap-3">
          <!-- 管理中心按钮 - 桌面端 -->
          <NuxtLink
            :to="appConfig.system.adminUrl"
            target="_blank"
            class="hidden md:inline-flex items-center gap-2 px-5 py-1 bg-primary text-white hover:bg-primary/90 bg-gradient-to-r from-[#9469FD] to-[#306BFC] font-medium rounded-full"
          >

            <Icon name="lucide:user-round" class="w-4 h-4 mr-0.1" />
            管理中心
          </NuxtLink>


          <!-- 移动端菜单图标 -->
          <Icon 
            :name="showMobileMenu ? 'lucide:x' : 'lucide:menu'" 
            class="md:hidden w-6 h-6 text-gray-700 cursor-pointer hover:text-gray-900 transition-colors" 
            @click="toggleMobileMenu"
          />
        </div>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <Transition
      enter-active-class="transition ease-out duration-200"
      enter-from-class="opacity-0 -translate-y-2"
      enter-to-class="opacity-100 translate-y-0"
      leave-active-class="transition ease-in duration-150"
      leave-from-class="opacity-100 translate-y-0"
      leave-to-class="opacity-0 -translate-y-2"
    >
      <div 
        v-show="showMobileMenu"
        class="md:hidden bg-white border-t border-gray-200 shadow-lg max-h-[70vh] overflow-y-auto"
      >
        <div class="mx-auto px-4 py-4 space-y-2">
          <!-- 首页 -->
          <NuxtLink
            to="/"
            @click="closeMobileMenu"
            class="block px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors font-medium"
          >
            首页
          </NuxtLink>

          <!-- 产品介绍 - 手风琴式展开 -->
          <div class="space-y-2">
            <button
              @click="toggleMobileProductMenu"
              class="w-full flex items-center justify-between px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors font-medium"
            >
              <span class="flex items-center gap-2">
                <!-- <Icon name="lucide:package" class="w-5 h-5" /> -->
                产品介绍
              </span>
              <Icon 
                name="lucide:chevron-down" 
                class="w-5 h-5 transition-transform duration-200"
                :class="{ 'rotate-180': showMobileProductMenu }"
              />
            </button>
            
            <Transition
              enter-active-class="transition-all ease-out duration-200"
              enter-from-class="opacity-0 max-h-0"
              enter-to-class="opacity-100 max-h-[2000px]"
              leave-active-class="transition-all ease-in duration-150"
              leave-from-class="opacity-100 max-h-[2000px]"
              leave-to-class="opacity-0 max-h-0"
            >
              <div v-show="showMobileProductMenu" class="space-y-3 py-2 overflow-hidden">
                <div v-for="category in productMenuItems" :key="category.label" class="space-y-2">
                  <div class="font-semibold text-sm text-gray-700 px-4">
                    {{ category.label }}
                  </div>
                  <NuxtLink
                    v-for="child in category.children"
                    :key="child.to"
                    :to="child.to"
                    @click="closeMobileMenu"
                    class="block px-8 py-2 text-sm text-gray-600 hover:bg-gray-100 rounded-lg transition-colors"
                  >
                    {{ child.label }}
                  </NuxtLink>
                </div>
              </div>
            </Transition>
          </div>

          <!-- 其他菜单项 -->
          <NuxtLink
            to="/solutions"
            @click="closeMobileMenu"
            class="block px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors font-medium"
          >
            行业解决案例
          </NuxtLink>
          
          <NuxtLink
            to="/developers"
            @click="closeMobileMenu"
            class="block px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors font-medium"
          >
            开发者工具
          </NuxtLink>
          
          <NuxtLink
            to="/about"
            @click="closeMobileMenu"
            class="block px-4 py-3 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors font-medium"
          >
            关于我们
          </NuxtLink>

          <div class="border-t border-gray-200 my-4"></div>

          <!-- 管理中心按钮 -->
          <NuxtLink
            :to="appConfig.system.adminUrl"
            target="_blank"
            @click="closeMobileMenu"
            class="flex items-center justify-center gap-2 w-full px-4 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium"
          >
            管理中心
            <Icon name="lucide:arrow-right" class="w-4 h-4" />
          </NuxtLink>
        </div>
      </div>
    </Transition>
  </header>
</template>

<style scoped>
/* 确保移动端菜单动画流畅 */
</style>

